import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import './index.scss';
import RichEditor from 'tool/rich-editor/index.jsx';
import FileUploader from 'tool/file-upload/index.jsx';
import CategorySearch from  'page/product/productList/CategorySearch.jsx';
import Product from  'service/product-service.jsx';
import Tool from  'tool/tool.jsx';
const _product = new Product();
const _req = new Tool();


//商品编辑组件
class ProductDetail extends React.Component{
  constructor(props){
    super(props);
    this.state={
      id: (this.props.location.state || {} ).pid, //获取路径参数
      subImages: [],
    };
    this.loadProductDtail = this.loadProductDtail.bind(this);
  }
  //框架进行组件渲染前调用该方法，用于判断此次请求是否带id
  componentDidMount(){
     this.loadProductDtail();
  }
  loadProductDtail(){
    //id存在，表明是商品编辑请求,需要进行表单回填
   if(this.state.id){
     //去请求商品详情接口
     _product.getProductDetail(this.state.id).then(res=>{
       //请求成功，res中的subImages字段为字符串，将其装换成数组后，再将res存放当state中
        let images = res.subImages.split(',');
        res.subImages=images.map((imgUri)=>{
          return{
            uri: imgUri,
            url: `${res.imageHost}${imgUri}`
          }
        })
        this.setState(res);
     },errMsg=>{
      _req.errorTips(errMsg);
     });
   }  
  }
 render(){
      return(
        <div id="page-wrapper">
          <PageTile title='商品详情'/>
          <div className="row">
              <div className="col-md-12">
                <div className="form-horizontal">
                    <div className="form-group">
                      <label className="col-md-2 control-label">商品名称</label>
                      <div className="col-md-5">
                        <p className="form-control-static">{this.state.name}</p>
                      </div>
                    </div>
                    <div className="form-group">
                      <label  className="col-md-2 control-label">商品描述</label>
                      <div className="col-md-5">
                        <p className="form-control-static">{this.state.subtitle}</p>
                      </div>
                    </div>
                    <CategorySearch ReadOnly categoryId={this.state.categoryId}  parentCategoryId={this.state.parentCategoryId}/>
                    <div className="form-group">
                      <label  className="col-md-2 control-label">商品价格</label>
                      <div className="col-md-3">
                        <div className="input-group">
                          <input type="number" readOnly className="form-control"  value={this.state.price}/>
                          <span className="input-group-addon">元</span>
                        </div>
                      </div>
                    </div>
                    <div className="form-group">
                      <label  className="col-md-2 control-label">商品库存</label>
                      <div className="col-md-3">
                        <div className="input-group">
                          <input type="number" readOnly className="form-control"  value={this.state.stock}/>
                          <span className="input-group-addon">件</span>
                        </div>
                      </div>
                    </div>
                    <div className="form-group img-wrapper">
                      <label  className="col-md-2 control-label">商品图片</label>
                      <div>
                        <div className="col-md-10 imgs-box">
                          {this.state.subImages.length !==0 
                            ? this.state.subImages.map((image,index)=>(
                              <div key={index} className="images">
                                <img src={image.url}/>
                              </div>
                              ))
                            : <div>暂无图片</div>
                          }
                        </div>
                      </div>
                    </div>
                    <div className="form-group">
                      <label  className="col-md-2 control-label">商品详情</label>
                      <div className=" product-detail col-md-10 control-label " dangerouslySetInnerHTML={{__html:this.state.detail}}>
                      </div>
                      </div>
                </div>
              </div>
           </div>
        </div>
      )
    }
  }
export default ProductDetail;

